<!doctype html>
<html lang="en">
<head>
	<!--
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/main.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/mine.css') }}">

<script src="{{ url_for('static',filename='js/jquery-1.12.4.js') }}"></script>
<script src="{{ url_for('static',filename='js/jquery-ui.min.js') }}"></script>
<script src="{{ url_for('static',filename='js/main.js') }}"></script>
-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/bootstrap-table.css') }}">
<!-- <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/main.css') }}"> -->
<!-- <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/mine.css') }}"> -->

<!-- <script src="{{ url_for('static',filename='js/jquery-1.12.4.js') }}"></script>
<script src="{{ url_for('static',filename='js/jquery-ui.min.js') }}"></script> -->
<!-- <script src="../../static/js/jquery-ui.js"></script>
<script src="../../static/js/jquery-ui.min.js"></script> -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script src="{{ url_for('static',filename='js/bootstrap-table.js') }}"></script>
<script src="{{ url_for('static',filename='js/bootstrap-table-zh-CN.js') }}"></script>

<!-- <script src="{{ url_for('static',filename='js/main.js') }}"></script> -->
</head>
<style type="text/css">
	.box{
		width: 300px;
		height: 500px;
	}
</style>
<body>
	<div class="alldiv">
			<div class="left_navigation" id="left_nav">
				
			</div>
			<script>
				$(left_nav).load('/Public/leftNav')
			</script>

		<div class="righthtml" >

			<img src="{{ url_for('static',filename='image/appointment.jpg') }}" width="100%" height="200">
			<h2>Appointment</h2>

			<div class="mine_center" style="margin-left: 200px;">
				<div class="mine_center_left">
					<div class="center_left_bottom">
						<div>
							<button onclick='PreviousDay()'>previous</button>
							<span for='app_date'>select the time: </span><input id = 'app_date' type="date" onchange="updateAppointment()">
							<button onclick='LatterDay()'>latter</button>
						</div>
						<div class="row">
							<div class="col-md-6">
								<table class="table table-bordered table-hover box">
									<thead>
										<tr>
											<th id="th_date">2020-11-20</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td  id = 'schedule0' class="success" data-toggle='modal' data-target='#details_toggle' data-data_index='0'>
												<p>9:00~10:00</p>
												<p>Avaliable</p>
											</td>
										</tr>
										<tr>
											<td  id = 'schedule1' class="active" data-toggle='modal' data-target='#details_toggle' data-data_index='1'>
												<p>10:00~11:00</p>
												<p>Avaliable</p>
											</td>
										</tr>
										<tr>
											<td  id = 'schedule2' class="success" data-toggle='modal' data-target='#details_toggle' data-data_index='2'>
												<p>11:00~12:00</p>
												<p>Avaliable</p>
											</td>
										</tr>
										<tr>
											<td  id = 'schedule3' class="success" data-toggle='modal' data-target='#details_toggle' data-data_index='3'>
												<p>15:00~16:00</p>
												<p>Avaliable</p>
											</td>
										</tr>
										<tr>
											<td  id = 'schedule4' class="success" data-toggle='modal' data-target='#details_toggle' data-data_index='4'>
												<p>16:00~17:00</p>
												<p>Avaliable</p>
											</td>
										</tr>
	
									</tbody>
								</table>
							</div>
							<div class="col-md-6">
								<div>appointment record</div>
								<table class="table table-bordered table-hover" id="tb_appointredord">
									<thead>
										<tr>
											<th>date</th>
											<th>part</th>
											<th>doctor name</th>
										</tr>
									</thead>
									<tbody id = 'appointredord'>

	
									</tbody>
								</table>
							</div>
						</div>

						<!-- <table class="table table-striped">
							<caption><center>MEDICATION</center></caption>
							<thead class="thead-dark">
								<tr>
								<th scope="col">Medication</th>
								<th scope="col">Take Time</th>
								</tr>
							</thead>
							<tbody>
								{% for row in data %}
								<tr>
									<td>{{row}}</td>
									<td>{{ row[0] }}</td>
									<td>{{ row[1] }}</td>
								</tr>
								{% endfor %}
							</tbody>
    					</table> -->

					</div>
				</div>
				
			</div>
		</div>
	</div>
	<div id="details_toggle" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <button class="close" data-dismiss="modal">
                        <span>×</span>
                    </button>
                </div>
                <div class="modal-title">
                    <!-- <h5 class="text-center">Make Appointments</h5> -->
                    <div id = 'index' style='display:none'></div>
                    <!-- <div id = 'index'></div> -->
                </div>
                <div class="modal-body">
                    <form class="form-group" method="POST" onclick="return false">
                        <div class="row">
							<div class='col-md-5'>
								<h4 id="tips_info">
									
								</h4>
							</div>
                        </div>
                        <div class="text-right">
                            <button id="btn_yes" class="btn btn-primary" data-dismiss="modal" onclick="btn_makeAppointment();">Yes</button>
                            <button class="btn btn-danger" data-dismiss="modal">cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


	<!-- <div class="container" style="margin: 50px;">
		<table class="table table-bordered table-hover" id="tb">
			<thead>
				<tr>
					<th>
						<input type="checkbox">
					</th>
					<th>啊啊</th>
					<th>哦哦</th>
					<th>嗯嗯</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<input type="checkbox" class="checks">
					</td>
					<td>ve</td>
					<td>ve</td>
					<td>ve</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" class="checks">
					</td>
					<td>ve</td>
					<td>ve</td>
					<td>ve</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" class="checks">
					</td>
					<td>ve</td>
					<td>ve</td>
					<td>ve</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" class="checks">
					</td>
					<td>ve</td>
					<td>ve</td>
					<td>ve</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" class="checks">
					</td>
					<td>ve</td>
					<td>ve</td>
					<td>ve</td>
				</tr>
			</tbody>
		</table>
	 </div> -->
</body>


</html>


<script>
	window.onload = function(){
		nowdate = new Date()
		$('#app_date').val(dateformat(nowdate))
		updateAppointment()
		// console.log("onload")
		// getpatientAppointrecord()
	}
	var time_table = ["9:00~10:00","10:00~11:00","11:00~12:00","15:00~16:00","16:00~17:00",]
	function dateformat(date){
		var Y = date.getFullYear();
		var M = date.getMonth()+1;
		var D = date.getDate();
		var stringformat = Y + (M < 10 ? '-0' : '-') + M + (D < 10 ? '-0' : '-') + D;
		return stringformat
	}
	function LatterDay(){
		var newdate = new Date($('#app_date').val())
		console.log(newdate.toLocaleDateString())
		newdate = newdate.setDate(newdate.getDate()+1)
		newdate = new Date(newdate)
		console.log(dateformat(newdate))
		$('#app_date').val(dateformat(newdate))
		updateAppointment()
	}
	function PreviousDay(){
		var newdate = new Date($('#app_date').val())
		console.log(newdate.toLocaleDateString())
		newdate = newdate.setDate(newdate.getDate()-1)
		newdate = new Date(newdate)
		console.log(dateformat(newdate))
		$('#app_date').val(dateformat(newdate))
		updateAppointment()
	}
	function updateAppointment(){
		date = $('#app_date').val()
		$.ajax({
				url: "/Appointment/getappint", 
				type: "POST",  
				data: {
					"date":$('#app_date').val(),
				},
				success: function (result) {
					if (result.message == "success") {
						appoint_info = result.res
						console.log(appoint_info)
						$("#th_date")[0].innerHTML = date
						updateAppointTable(appoint_info)
						getpatientAppointrecord()
						
					}
					else {
						alert('getappint '+result.message)
					}
				}
			});
	}
	function getpatientAppointrecord(){
		$.ajax({
				url: "/Appointment/getpatientAppointrecord", 
				type: "POST",  
				data: {
				},
				success: function (result) {
					if (result.message == "success") {
						res = result.res
						console.log(res)
						updateAppointRecordTable(res)
						
					}
					else {
						alert('getappint '+result.message)
					}
				}
			});
	}
	function updateAppointRecordTable(appointRecord){
		html_str = ""
		nowdate = new Date()
		for(record of appointRecord){
			datee = new Date(record[0])
			if (nowdate > datee){
				html_str += "<tr class = 'active'>"
			}
			else{
				html_str += "<tr>"
			}
			html_str += "<td>"+datee.toLocaleDateString()+"</td>"
			html_str += "<td>"+time_table[record[1]]+"</td>"
			html_str += "<td>"+record[2]+"</td>"
			html_str += "</tr>"
		}
		$("#appointredord")[0].innerHTML = html_str
		// $('#tb_appointredord').bootstrapTable('refresh');

	}
	function updateAppointTable(appoint_info){
		var nowdate = new Date()
		nowdate = new Date(nowdate.toLocaleDateString())
		var select_date = new Date($('#app_date').val())
		if(select_date < nowdate){
			for(var i = 0; i < 5; i++)
			{
				var schedul = $("#schedule"+i)
				schedul.removeClass('success')
				schedul.addClass('active')
				schedul.find("p")[1].innerHTML = "Expired"
			}
			return
		}
		for(var i = 0; i < 5; i++)
		{
			var schedul = $("#schedule"+i)
			schedul.removeClass('active')
			schedul.addClass('success')
			schedul.find("p")[1].innerHTML = "Avaliable"
		}
		for(info of appoint_info){
			var schedul = $("#schedule"+info)
			schedul.removeClass('success')
			schedul.addClass('active')
			schedul.find("p")[1].innerHTML = "Already Appointed"
		}
	}
	function updateAppointRow(selectRow){
			var schedul = $("#schedule"+selectRow)
			schedul.removeClass('success')
			schedul.addClass('active')
			schedul.find("p")[1].innerHTML = "Already Appointed"
	}
	function btn_makeAppointment(){
		makeAppointment()
	}
	function makeAppointment(){
		$.ajax({
				url: "/Appointment/makeappoint", 
				type: "POST",  
				data: {
					"date":$('#app_date').val(),
					"part":$('#details_toggle').data("select_data"),
				},
				success: function (result) {
					if (result.message == "success") {
						updateAppointRow($('#details_toggle').data("select_data"))
						getpatientAppointrecord()
					}
					else {
						alert(result.message)
					}
				}
			});
	}
	function logout(){
		$.ajax({
				url: "/VitalSigns/logout", 
				type: "POST",  
				data: {
				},
				success: function (result) {
					if (result.message == "success!") {
					
						alert("Logout！");
						location.href="/Login/";
					}
					else {
						alert(result.message)
					}
				}
			});
	}
    $('#details_toggle').on('show.bs.modal', function (event) {
		
        var dataRow = $(event.relatedTarget) // Button that triggered the modal
		if(dataRow.hasClass('active')){
			console.log('active hide')
			// $('#details_toggle').modal('hide');
			$("#tips_info")[0].innerHTML = "Have Already Made An Appointment"
			$("#btn_yes")[0].style.display = 'none'
			// event.preventDefault();
			return
		}

		$("#btn_yes")[0].style.display = ''
		var modal = $(this)
        var data_index = dataRow.data('data_index')
		console.log(dataRow)
		mk_app_time = time_table[data_index]
		mk_app_date = $("#app_date").val()
		$("#tips_info")[0].innerHTML = "Do you wanna make appointment with doctor in <b><span id='appoint_time'>"+mk_app_time+"</span></b> <b><span id='appoint_date'>"+mk_app_date+"</span></b>";
		modal.data("select_data",data_index)
		console.log(modal)
        // console.log(modal)

        modal.find('#appoint_time')[0].innerHTML = mk_app_time
        modal.find('#appoint_date')[0].innerHTML = mk_app_date
        // modal.find("#pic_img")[0].src = img_src+details[4]
        // modal.find("#name").val(details[0])
        // modal.find("#grade1").val(details[1])
        // modal.find("#grade2").val(details[2])
        // modal.find("#grade3").val(details[3])
        // modal.find("#major").val(details[5])
        // modal.find("#honor").val(details[6])
        // modal.find(".modal-title #index")[0].innerHTML = data_index
        // modal.find('.modal-title').text('New message to ' + recipient)
        // modal.find('.modal-body input').val(recipient)
    })
	//分页
	// $("#tb_appointredord").bootstrapTable({
    //     pagination: true,   //是否显示分页条
    //     pageSize: 3,   //一页显示的行数
    //     paginationLoop: false,   //是否开启分页条无限循环，最后一页时点击下一页是否转到第一页
    //     pageList: [5, 10, 20]   //选择每页显示多少行，数据过少时可能会没有效果
    // });

	
</script>